<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="0" :xs="0">
          <div class="h_left">
            <div class="label">访问账号</div>
            <div>您好！欢迎使用淄博市地方征信平台</div>
            <div>您上次的登录时间：2021-06-18</div>
            <div class="label"> <i class="el-icon-view"></i> 快速链接 </div>
            <div class="history">
              <el-timeline>
                <el-timeline-item placement="bottom" v-for="(item,index) in visitedViews" :key="index">
                  <el-card>
                    <h4>{{item.title}} - 淄博市地方征信平台</h4>
                    <p class="fr">于 {{item.ptime}} 访问</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-col>
        <el-col :span="24" :xs="24">
          <div class="h_right">
            <div class="h_date f14">截止统计日期: {{new Date().toLocaleString()}}</div>
            <div class="chart-container">
              <MoreChart :cData="d5" ref="c5" id="c5" height="100%" width="45%" />
              <PieChart :cData="d6" id="c6" height="100%" width="45%" />
            </div>
            <div class="container">
              <p>统计时间：</p>
              <div class="dataSearch">
                <el-date-picker
                  v-model="timeChecked"
                  @change="selectTime"
                  type="monthrange"
                  :picker-options="pickerOptions"
                  value-format="yyyy.MM"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份">
                </el-date-picker>
              </div>
            </div>
            <div class="chart-container">
              <MoreChart :cData="d7" ref="c7" id="c7" height="100%" width="45%" />
              <MoreChart :cData="d8" ref="c8" id="c8" height="100%" width="45%" />
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import Chart from '@c/Charts/LineMarker';
import BarChart from '@c/Charts/BarChart';
import PieChart from '@c/Charts/PieChart.vue';
import MoreChart from "@c/Charts/MoreChart";
import MapChart from "@c/Charts/MapChart";
import {getBasics,getBadBasics,getBadBasicsTime } from "@/api/chart";
export default {
  components: {
    MapChart,
    MoreChart,
    Chart,
    BarChart,
    PieChart
  },
  data() {
    return {
      tabNum: '1',
      timeChecked:[],
      pickerOptions:{
        disabledDate(v){
          return v.getTime() > Date.now() - 8.64e7*30;
        }
      },
      d5: {
        title: '不良贷款总览',
        cLabel: [],
        cData: [{
          name: '贷款余额（万元）',
          type: 'bar',
          stack:'Add',
          color:'#73a0fa',
          lineWidth: 30,
          data: []
        }, {
          name: '不良贷款余额（万元）',
          type: 'bar',
          stack:'Add',
          color:'#ed7d31',
          lineWidth: 30,
          data: []
        }, {
          name: '不良企业数量',
          type: 'line',
          color:'#a5a5a5',
          yAxisIndex:1,
          lineWidth: 20,
          data: []
        }],
        yAxis:{
          type: 'value',
          position: 'right',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FF7F00'
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        }
      },
      d6: {
        title: '不良贷款余额区域分布',
        cLabel: [],
        cData: []
      },
      d7: {
        title: '不良贷款变动趋势',
        cLabel: [],
        cData: [{
          name: '不良贷款企业数量（家）',
          type: 'bar',
          color:'#73a0fa',
          lineWidth: 30,
          data: []
        },{
          name: '不良贷款企业数量环比增长率',
          type: 'line',
          color:'#a5a5a5',
          yAxisIndex:1,
          lineWidth: 20,
          data: []
        }],
        yAxis:{
          type: 'value',
          name: '百分比',
          position: 'right',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FF7F00'
            }
          },
          axisLabel: {
            formatter: '{value} %'
          }
        }
      },
      d8: {
        title: '不良贷款余额变动趋势',
        cLabel: [],
        cData: [{
          name: '不良贷款金额（万元）',
          type: 'bar',
          color:'#ed7d31',
          lineWidth: 30,
          data: []
        },{
          name: '不良贷款余额环比增长率',
          type: 'line',
          color:'#ffc000',
          yAxisIndex:1,
          lineWidth: 20,
          data: []
        }],
        yAxis:{
          type: 'value',
          name: '百分比',
          position: 'right',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FF7F00'
            }
          },
          axisLabel: {
            formatter: '{value} %'
          }
        }
      }
    }
  },
  mounted() {
    //this.getChartData();
    this.getChartData2();
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
  },
  methods: {
    handleClick(e) {
      
    },
    toFix(val){
      return (val/10000).toFixed(2);
    },
    /* getChartData(params = {}) {
      getBasics(params).then(data => {
        for (var i = 0; i < data.data.basics.length; i++) {
          this.d6.cLabel.push(data.data.basics[i].name);
          this.d6.cData.push({value:[data.data.basics[i].badAmount,data.data.basics[i].num],name:data.data.basics[i].name}) 
        }
        this.initChart6(this.d6);
      })
    }, */
    getChartData2(params = {}){
      getBadBasics(params).then(res=>{
        if(res.data.badSecond.length > 0){
          let len = res.data.badSecond.length;
          this.timeChecked[0] = res.data.badSecond[0].time;
          this.timeChecked[1] = res.data.badSecond[len-1].time;
          for (let i = 0; i < res.data.badFirst.length; i++) {
            this.d5.cLabel.push(res.data.badFirst[i].SSHY);
            this.d5.cData[0].data.push(this.toFix(res.data.badFirst[i].total)) 
            this.d5.cData[1].data.push(this.toFix(res.data.badFirst[i].badtotal)) 
            this.d5.cData[2].data.push(res.data.badFirst[i].badcount) 
          }
          this.$refs.c5.initChart(this.d5)
        }
        if(res.data.badQy.length > 0){
          for (var n = 0; n < res.data.badQy.length; n++) {
            this.d6.cLabel.push(res.data.badQy[n].SSQU);
            this.d6.cData.push({value:[res.data.badQy[n].badtotal,res.data.badQy[n].badcount],name:res.data.badQy[n].SSQU}) 
          }
          this.initChart6(this.d6);
        }
        if(res.data.badSecond.length > 0){
          for (let j = 0; j < res.data.badSecond.length; j++) {
            this.d7.cLabel.push(res.data.badSecond[j].time);
            this.d7.cData[0].data.push(res.data.badSecond[j].count)
            this.d7.cData[1].data.push((res.data.badSecond[j].ratio)*100)
          }
          this.$refs.c7.initChart(this.d7)
        }
        if(res.data.badThird.length > 0){
          for (let k = 0; k < res.data.badThird.length; k++) {
            this.d8.cLabel.push(res.data.badThird[k].time);
            this.d8.cData[0].data.push(this.toFix(res.data.badThird[k].sum))
            this.d8.cData[1].data.push((res.data.badThird[k].ratio)*100)
          }
          this.$refs.c8.initChart(this.d8)
        }
      });
    },
    selectTime(){
      let params = {
        startTime:this.timeChecked[0].split('.').join(''),
        endTime:this.timeChecked[1].split('.').join('')
      }
      getBadBasicsTime(params).then(res=>{
        this.d7.cLabel = [];
        this.d7.cData[0].data = [];
        this.d7.cData[1].data = [];
        this.d8.cLabel = [];
        this.d8.cData[0].data = [];
        this.d8.cData[1].data = [];
        for (let j = 0; j < res.data.badSecond.length; j++) {
          this.d7.cLabel.push(res.data.badSecond[j].time);
          this.d7.cData[0].data.push(res.data.badSecond[j].count)
          this.d7.cData[1].data.push((res.data.badSecond[j].ratio)*100)
        }
        this.$refs.c7.initChart(this.d7)
        for (let k = 0; k < res.data.badThird.length; k++) {
          this.d8.cLabel.push(res.data.badThird[k].time);
          this.d8.cData[0].data.push(this.toFix(res.data.badThird[k].sum))
          this.d8.cData[1].data.push((res.data.badThird[k].ratio)*100)
        }
        this.$refs.c8.initChart(this.d8)
      });
    },
    initChart6(e) {
      if (e.cData.length !== 0) {
        let chart = echarts.init(document.getElementById("c6"));
        let option = {
            backgroundColor: '#ffffff',
            title: {
                top: 20,
                text: e.title,
                textStyle: {
                    fontWeight: '600',
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: (data)=>{
                  return data.data.name+"<br/>不良贷款余额："+this.toFix(data.data.value[0])+"万元<br/>不良贷款企业："+data.data.value[1]+"家";
                }
            },
            legend: {
                left: 'center',
                bottom: '50',
                data: e.cLabel
            },
            series: [{
                name: e.sName,
                type: 'pie',
                label: {
                    position: 'inner',
                    show: true,
                    formatter: '{d}%'
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                roseType: e.roseType ? 'radius' : '',
                radius: e.seriesRadius || [15, 95],
                center: ['50%', '48%'],
                data: e.cData,
                animationEasing: 'cubicInOut',
                animationDuration: 2000
            }]
        };
        chart.setOption(option);
      }else{
        var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;">${e.title}</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
        document.getElementById("c6").innerHTML = html
        document.getElementById("c6").removeAttribute('_echarts_instance_')
      }
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
.border {
  border-left: 1px solid #797979;
}

.h_left {
  .label {
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
  }

  .history {
    .el-timeline {
      padding-left: 0;
      cursor: pointer;
    }

    /deep/ .el-card__body {
      padding: 10px;
    }
  }

}

.h_right {
  /deep/ .el-tabs__item {
    font-size: 20px;
    font-weight: 600;
  }

  .label {
    line-height: 40px;
  }

  .h_date {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .chart-container {
    height: 450px;
    display: flex;
  }
  .container{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .data_label {
    margin-top: 15px;
    border-bottom: 1px solid #eaeaea;
  }

}

</style>
